<!--
- Author:  LiShibin.
- Date:    2018/3/20 0020.
- File:    detail.
-->
<template>
  <div>
    <div class="ProList">
      <div class="couponlist f-cb" v-if="coupon.requested && coupon.data">
        <div class="fl">
          <p class="c_class">类型：{{coupon.data.voucher_t_type | couponTypeTxt}}</p>
          <p class="c_time">{{coupon.data.voucher_t_start_date | timestampToDate('yyyy.MM.dd')}}-{{coupon.data.voucher_t_end_date | timestampToDate('yyyy.MM.dd')}}</p>
          <p class="c_money">{{coupon.data.voucher_t_limit | couponUseTxt}}</p>
        </div>
        <div class="fr">
          <p class="c_price">￥<span>{{coupon.data.voucher_t_price}}</span></p>
          <div class="c_receive" @click="receiveCoupon(coupon.data.voucher_t_id)">立即领取</div>
        </div>
      </div>
      <div style="text-align: center; margin-top: 200px; font-size: 14px;" v-if="coupon.requested && !coupon.data">该优惠券已被领取完或已失效了~</div>
    </div>
    <footer-tab></footer-tab>
  </div>

</template>

<script>
  export default{
    data() {
      return {
        id: this.$route.params.id,
        coupon: {requested: false, data: null}
      }
    },
    components: {},
    created() {
      this.getCouponDetail()
    },
    methods: {
      getCouponDetail() {
        this.$request.getCouponDetail(this.id).then(data => {
          if (!this.$utils.isEmptyObject(data)) {
            this.coupon.data = data
          }
        }).catch(e => {
          this.$toast(e.msg)
        }).finally(() => {
          this.coupon.requested = true
        })
      },
      receiveCoupon(couponId) {
        this.$request.receiveCoupon(couponId).then(data => {
          this.$toast('领取成功')
        }).catch(e => {
          this.$toast('领取失败:' + e.msg)
        })
      }
    }
  }
</script>

<style>

</style>